<template>
  <div style="with:100%;height:100%; position: relative;">
    <div class="officialPage">
      <div class="officialTop">
        <div class="topBox">
          <div class="contentTop">
            <p>
              VOL. {{ officialList.qid }} <el-tag effect="plain">
                <i class="el-icon-message" /> 官方来杠
              </el-tag>
            </p>
          </div>
          <div class="contentMiddle">
            <p>{{ officialList.qtitle }}</p>
            <span>{{ showEllipsis(officialList.qdesc,80) }}</span>
          </div>
          <div class="contentBottom">
            <div class="progress">
              <div class="progressText">
                <span style="color:#409EFF">{{ officialList.optionOne }} {{ blueOption.length }}</span>
                <span style="color:#F56C6C">{{ officialList.optionTwo }} {{ redOption.length }}</span>
              </div>
              <el-progress
                :percentage="percent"
                :format="format"
                :text-inside="true"
                :stroke-width="10"
              />
            </div>
            <div class="bulletBtn" @click="goWriteRemark">
              <span>杠!</span>
            </div>
          </div>
        </div>
      </div>
      <div class="officalBottom">
        <el-tabs v-model="activeName" stretch>
          <el-tab-pane label="蓝方观点" name="blue">
            <div v-for="(item,index) in blueRemark" :key="index" class="optionItem">
              <div class="itemTop">
                <div class="itemImg">
                  <img :src="baseUrl+item.userImg" alt="" width="100%"
                       height="100%"
                  >
                </div>
                <div class="itemText">
                  <p>{{ item.userName }}</p>
                  <el-tag :type="item.userExperType" size="mini">
                    Lv.{{ item.userexper }} {{ item.userExperDes }}
                  </el-tag>
                </div>
              </div>
              <div class="itemContent">
                <div class="wordCon">
                  {{ showEllipsis(item.rcontent,43) }}
                </div>
              </div>
              <p class="pDate">
                {{ transformTimestamp(item.rDate) }}
              </p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="红方观点" name="red">
            <div v-for="(item,index) in redRemark" :key="index" class="optionItem">
              <div class="itemTop">
                <div class="itemImg" style="border: 2px solid #F56C6C;">
                  <img :src="baseUrl+item.userImg" alt="" width="100%"
                       height="100%"
                  >
                </div>
                <div class="itemText">
                  <p>{{ item.userName }}</p>
                  <el-tag :type="item.userExperType" size="mini">
                    Lv.{{ item.userexper }} {{ item.userExperDes }}
                  </el-tag>
                </div>
              </div>
              <div class="itemContent" style="border: 2px solid #F56C6C;">
                <div class="wordCon">
                  {{ showEllipsis(item.rcontent,43) }}
                </div>
              </div>
              <p class="pDate">
                {{ transformTimestamp(item.rDate) }}
              </p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="bulletChat">
      <input v-model="screenText" type="text" placeholder="发射弹幕救救孩子（20字以内）">
      <el-button type="primary" round size="small"
                 @click="sendScreen"
      >
        发射
      </el-button>
      <svg-icon :icon-class="bullet" @click="changeBullet" />
    </div>
    <vue-seamless-scroll v-show="scrollFlag" class="wrap" :data="listData"
                         :class-option="classOption"
    >
      <ul class="item">
        <li v-for="(item, index) in listData" :key="index">
          <div class="userImg">
            <img :src="baseUrl+item.userImg" alt="" width="100%"
                 height="100%"
            >
          </div>

          <span class="title" v-text="showEllipsis(item.bcontent,20)" />
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
import { showEllipsis, transformTimestamp } from '../../utils/validate';
import { getOfficialSubject, getBullet, insertBullet, getRemarkByQid, getOptionsByQid } from '../../api/subject';
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      bullet: 'bulletOpen',
      activeName: 'blue',
      officialList: {},
      listData: [],
      classOption: {
        step: 0.5,
        hoverStop: false
      },
      scrollFlag: true,
      screenText: '',
      baseUrl: '',
      allRemark: [],
      blueRemark: [],
      redRemark: [],
      percent: 0,
      allOption: [],
      blueOption: [],
      redOption: []
    };
  },
  created() {
    this.getOfficialSubject();
    this.getOptions();
  },
  methods: {
    showEllipsis,
    transformTimestamp,
    renderUserTag(obj) {
      obj.forEach(item => {
        switch (item.userexper) {
        case 1:
          this.$set(item, 'userExperType', 'info');
          this.$set(item, 'userExperDes', '杠师');
          break;
        case 2:
          this.$set(item, 'userExperType', 'success');
          this.$set(item, 'userExperDes', '杠尊');
          break;
        case 3:
          this.$set(item, 'userExperType', '');
          this.$set(item, 'userExperDes', '杠王');
          break;
        case 4:
          this.$set(item, 'userExperType', 'warning');
          this.$set(item, 'userExperDes', '杠圣');
          break;
        case 5:
          this.$set(item, 'userExperType', 'danger');
          this.$set(item, 'userExperDes', '杠神');
          break;
        default:
          break;
        }
      });
    },
    changeBullet() {
      if (this.bullet === 'bulletOpen') {
        this.bullet = 'bulletClose';
        this.scrollFlag = false;
      } else {
        this.bullet = 'bulletOpen';
        this.scrollFlag = true;
      }
    },
    sendScreen() {
      const dis = this.listData.length * 36;
      const objDiv = document.getElementsByClassName('wrap')[0].getElementsByTagName('div');
      const numDis = this.listData.length - (dis - (-parseInt(objDiv[0].style.transform.split(',')[1]))) / 36;
      const param = {
        uid: this.$store.getters.userInfo.uid,
        qid: this.officialList.qid,
        bcontent: this.screenText
      };
      insertBullet(param).then((res) => {
        if (res.data.code === 200) {
          this.listData.splice(numDis + 4, 0, {
            'bcontent': this.screenText,
            'userImg': this.$store.getters.userInfo.userImg
          });
          this.$message({
            showClose: true,
            message: '发射成功~',
            type: 'success'
          });
          this.screenText = '';
        } else {
          this.$message({
            showClose: true,
            message: '发射失败',
            type: 'error'
          });
          this.screenText = '';
        }
      });
    },
    format() {
      return '';
    },
    // 得到官方题目
    getOfficialSubject() {
      getOfficialSubject().then((res) => {
        if (res.data.code === 200) {
          this.officialList = res.data.data.pop();
          this.getBulletObj();
          this.getRemarkList();
          this.baseUrl = process.env.VUE_APP_DEV_TARGET;
        }
      });
    },
    // 得到弹幕
    getBulletObj() {
      const param = { qid: this.officialList.qid };
      getBullet(param).then((res) => {
        if (res.data.code === 200) {
          this.listData = res.data.data;
        }
      });
    },
    // 得到指定评论
    getRemarkList() {
      const param = { qid: this.officialList.qid };
      getRemarkByQid(param).then((res) => {
        if (res.data.code === 200) {
          this.allRemark = res.data.data;
          this.renderUserTag(res.data.data);
          res.data.data.forEach(item => {
            if (item.option === 1) {
              this.blueRemark.unshift(item);
            } else {
              this.redRemark.unshift(item);
            }
          });
        }
      });
    },
    getOptions() {
      getOptionsByQid().then(res => {
        if (res.data.code === 200) {
          this.allOption = res.data.data;
          res.data.data.forEach(item => {
            if (item.qid === this.officialList.qid) {
              if (item.useroption === 1) {
                this.blueOption.unshift(item);
              } else {
                this.redOption.unshift(item);
              }
            }
          });
          this.percent = this.blueOption.length / (this.blueOption.length + this.redOption.length) * 100;
        }
      });
    },
    // 去编写评论
    goWriteRemark() {
      let optionFlag = 0;
      this.allOption.forEach(item => {
        if (item.uid === this.$store.getters.userInfo.uid && item.qid === this.officialList.qid) {
          console.log(item.uid);
          optionFlag = item.useroption;
        }
      });
      this.$router.push({ name: 'writeRemark', params: { questions: this.officialList, optionFlag: optionFlag } });
    }
  }
};
</script>
<style lang="scss">
.officalBottom{
  .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
    width: 50%;
    margin: 0px auto;
    margin-bottom: 15px;
    .el-tabs__active-bar {
      background:  linear-gradient(to right,#d81e06,#409EFF)
    }
    .el-tabs__item.is-active{
      background: -webkit-linear-gradient(left, #409EFF,#d81e06);     /* 背景色渐变 */
      background-clip: text;         /* 规定背景的划分区域 */
      -webkit-text-fill-color: transparent;  /* 防止字体颜色覆盖 */
    }
  }
}
.el-progress-bar__outer{
  background: #F56C6C;
}
</style>
<style lang="scss" scoped>
// 滚动字幕
.wrap {
    width: 80%;
    height: 25vh;
    position: absolute;
    bottom: 60px;
    left: 0px;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      // box-sizing: border-box;
      li{
        width: auto;
        font-size: 12px;
        line-height: 24px;
        margin-bottom: 10px;
        color: #fff;
        position: relative;
        .userImg{
          position: absolute;
          float: left;
          width: 24px;
          height: 24px;
          border-radius: 100%;
          margin-right: -24px;
          overflow: hidden;
          z-index: 90;
        }
        span{
          display: inline-block;
          background: rgba($color: #000000, $alpha: 0.8);
          border-radius: 15px;
          padding: 0 10px 0 32px;
          // margin-left: -32px;
          z-index: 89;
        }
      }

    }
  }
.officialPage{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .officialTop{
    width: 100%;
    height: 60%;
    background: linear-gradient(to bottom right,#d81e06,#409EFF);
    display: flex;
    align-items: center;
    justify-content: center;
    .topBox{
      width: 90%;
      height: 70%;
      background: #ffff;
      border-radius: 10px;
      margin-top: -30px;
      box-shadow: 2px 2px 5px #5e5e5e;
      padding: 10px;
      .contentTop{
        width: 100%;
        height: 30px;
        font-size: 16px;
        .el-tag{
          border-radius: 15px;
          margin-left: 5px;
          font-size: 12px;
        }
      }
      .contentMiddle{
        width: 100%;
        height: 60%;
        margin-top: 15px;
        p{
          text-align: center;
          font-size: 16px;
          font-weight: bold;
          line-height: 32px;
          margin-bottom: 10px;
        }
        span{
          display: inline-block;
          padding: 0 15px;
          font-size: 14px;
          line-height: 24px;
          color: #5e5e5e;
        }
      }
      .contentBottom{
        width: 100%;
        padding: 0 15px;
        display: flex;
        align-items: center;
        .progress{
          width: 70%;
          margin-right: 10px;
          .progressText{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
          }
        }
        .bulletBtn{
          background: linear-gradient(to top left,#d81e06,#409EFF);
          border-radius: 15px;
          color: #fff;
          display: flex;
          font-size: 16px;
          line-height: 32px;
          padding: 5px 18px;
          text-align: center;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .officalBottom{
    width: 100%;
    min-height: 250px;
    margin-top: -30px;
    border-radius: 10px 10px 0px 0px;
    background:#ffff;
    box-shadow: 2px 2px 5px #5e5e5e;
    padding-bottom: 60px;
    .optionItem{
      margin: 0 auto;
      width: 85%;
      // height: 80px;
      padding: 10px 0;
      border-bottom: 1px solid gray;
      .itemTop{
        width: 100%;
        height: 36px;
        display: flex;
        .itemImg{
          width: 32px;
          height: 32px;
          border-radius: 100%;
          border: 2px solid #409EFF;
          overflow: hidden;
        }
        .itemText{
          margin-left: 10px;
          p{
            font-size: 14px;
            font-weight: bold;
          }
          .el-tag{
              font-size: 10px  !important;
            }
        }
      }
      .itemContent{
        margin-top: 15px;
        border: 2px solid #409EFF;
        background: #F2F6FC;
        border-radius: 10px;
        width: calc(100% - 42px);
        margin-left: 42px;
        height: 60px;
        .wordCon{
          box-sizing: border-box;
          padding: 5px;
          width: 100%;
          height: 100%;
          font-size: 12px;
          line-height: 22px;
        }
      }
      .pDate{
        margin-top: 10px;
        font-size: 12px;
        color: #5e5e5e;
        text-align: right;
      }
    }
    .optionItem:last-child{
      border: none;
    }
  }
}
.bulletChat{
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background: #ffff;
  box-shadow: 1px 2px 5px #5e5e5e;
  z-index: 999;
  input{
    width: 55%;
    height: 36px;
    border:none;
    background: #d5d9e2;
    font-size: 12px;
    padding-left: 28px;
    margin: 0px 10px;
    border-radius: 25px;
    color: #606266;
  }
  .el-button{
    width: 65px;
    margin-right: 10px;
    height: 36px;
    background: linear-gradient(to right,#409EFF,#86c2ff);
    border: none;
  }
  .svg-icon{
    width: 36px;
    height: 36px;
  }
}
</style>
